//
//  02.swift
//  LearnSwiftUI
//
//  Created by srxboys on 2020/12/11.
//

// https://www.bilibili.com/video/BV1X7411R73g?p=2

/**
 
 # Layout and Stacks
 
 从下面的代码中，我们可以看出 Swift基础 很重要，
 阅读代码不会出现 不知所以然
 
 
    1、点击 Resume 启动预览
 
    2、点击 Resume下的 Ui-Design , Command + 左击，选择Text的样式(有点类似 Android了)
 
    3、点击 XCode 编辑器 导航栏右侧 ➕
        1) 搜索 Text
        2) 筛选条件 D
        3) 鼠标点击(左击) 可以拖拽到 Text(UI Design) 上下左右，我们拖到下
        4）你会发现我们的 2个 Text 会被 VStack包裹
 
        VStack - 是什么，本质上有点类似 css里面的 flexbox
        文档中解释：A view that arranges its children in a vertical line.(以垂直线排列其子对象的视图。)
 
 
 ZStack 三维
 VStack 纵向
 HStack 横向
 
 图片（注意 函数顺序）
 1. resizable 可调整打下 (需要使用frame)
 2. aspectRatio 拉伸

 Spacer
 
 */


// SwiftUI  iOS >= 13
import SwiftUI

// 结构体:ContentView - 实现协议 View
struct ContentView02: View {
    var body: some View {
        // VStack 是什么语法？
        
        // VStack定义： @frozen public struct VStack<Content> : View where Content : View {...}
        // 冻结 开放 结构, View(数组中的某个) 遍历 Content(数组)???
        
        
        
        ZStack { // 三维
            VStack {
                Spacer()
            }
            .frame(width: 300, height: 200)
            .background(Color.blue)
            .cornerRadius(20)
            .shadow(radius: 20)
            .offset(x: 0, y: -20)
            
            VStack {
                HStack {
                    VStack(alignment: .leading) {
                        // 回顾基础，这不就是 Text初始化.func(param).func(param)
                        Text("UI Design")
                            .font(.title)
                            .fontWeight(.semibold)
                        
                        Text("Certificate")
                            .foregroundColor(Color("accent"))
                    }
                    Spacer()
                    Image("Logo1")
                }
                .padding(.horizontal, 20) // 默认16
                .padding(.top, 20)
                Spacer()
                Image("Card1")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 300, height: 110, alignment: .top)
            }
            .frame(width: 340.0, height: 220)
            .background(Color.blue)
            .cornerRadius(20)
            .shadow(radius: 20)
        }
    }
}

struct ContentView_Previews02: PreviewProvider {
    static var previews: some View {
        ContentView02()
    }
}
